<script lang="ts" setup>
import { ref, reactive } from "vue"
import { usePagination } from "@/hooks/usePagination"
import { type FormInstance, type FormRules, ElMessage, type TabsPaneContext } from "element-plus"
import { configurationApi, configurationSuperApi, updateConfigurationSuperApi } from "@/api/vouchercenter"
const loading = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)
const { paginationData } = usePagination()
// #region
// 弹出框
const dialogVisible = ref<boolean>(false)
// 查看
const tableData = ref<any>([])
const tableDataA = ref<any>([]) //上级
const shopFlag = ref<any>(0)
const getTableData = () => {
  loading.value = true
  configurationApi({
    shop: shopFlag.value
  })
    .then((res: any) => {
      loading.value = false
      tableData.value = res.data
      console.log(res, "数据")
    })
    .catch(() => {
      tableData.value = []
    })
  configurationSuperApi({}).then((res: any) => {
    const result = Object.entries(res.data).map(([key, value]) => ({
      label: value,
      value: parseInt(key)
    }))

    tableDataA.value = result
    console.log(tableDataA.value, "上级")
  })
}

getTableData()
const handleClick = (tab: TabsPaneContext) => {
  paginationData.currentPage = 1
  // if (paginationData.currentPage === 1) {
  if (tab.paneName == "one") {
    shopFlag.value = 0
  }
  if (tab.paneName == "two") {
    shopFlag.value = 1
  }
  if (tab.paneName == "three") {
    shopFlag.value = 2
  }
  if (tab.paneName == "four") {
    shopFlag.value = 3
  }
  if (tab.paneName == "five") {
    shopFlag.value = 4
  }
  // }
  // paginationData.currentPage = 1
  getTableData()
}

const formData = reactive<any>({
  id: "",
  fee: "",
  real: "",
  goodsCode: "",
  callSuper: ""
})
// 新增
const dialogTitle = ref(undefined)
// const handleadd = () => {
//   dialogVisible.value = true
// }

// 修改
const handleUpdate = (row: any) => {
  dialogVisible.value = true
  dialogTitle.value = row.id
  formData.id = row.id
  formData.fee = row.fee
  formData.real = row.real
  formData.callSuper = row.callSuper
  formData.goodsCode = row.goodsCode
  formData.state = row.state
  console.log(row, "修改")
}
// 禁用
const handleUpdateJY = (row: any) => {
  formData.value = row
  formData.value.state = "禁用"
  console.log(formData.value, "修改")
  updateConfigurationSuperApi(formData.value).then(() => {
    ElMessage.success("禁用成功")
    getTableData()
  })
}
// 启用
const handleUpdateQY = (row: any) => {
  formData.value = row
  formData.value.state = "启用"
  console.log(formData.value, "修改")
  updateConfigurationSuperApi(formData.value).then(() => {
    ElMessage.success("启用成功")
    getTableData()
  })
}
// 改弹出框验证
const formRules: FormRules = reactive({
  callSuper: [{ required: true, trigger: "blur", message: "请选择上级" }],
  state: [{ required: true, trigger: "blur", message: "请选择状态" }],
  real: [{ required: true, trigger: "blur", message: "请输入实际金额" }]
})
const handleCreate = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      updateConfigurationSuperApi({
        id: formData.id,
        fee: formData.fee,
        real: formData.real,
        callSuper: formData.callSuper,
        goodsCode: formData.goodsCode,
        state: formData.state
      }).then(() => {
        ElMessage.success("修改成功")
        dialogVisible.value = false
        getTableData()
      })
      console.log("修改成功")
      dialogVisible.value = false
    } else {
      return false
    }
  })
}
// ** 清除规则报错信息
const clearValidate = () => {
  formRef.value?.clearValidate()
}
const resetForm = () => {
  clearValidate()
  // 清空reactive对象里面的key值
  Object.keys(formData).map((key) => {
    delete formData[key]
  })
  dialogTitle.value = undefined
}
// #endregion
const activeName = ref("one")
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never">
      <!-- <el-button type="primary" @click="handleadd">新增</el-button> -->
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="移动" name="one" />
        <el-tab-pane label="电信" name="two" />
        <el-tab-pane label="联通" name="three" />
        <el-tab-pane label="河南电信" name="four" />
        <el-tab-pane label="广电" name="five" />
      </el-tabs>
      <div class="table-wrapper">
        <el-table :data="tableData">
          <el-table-column type="index" label="序号" align="center" width="70px">
            <template #default="{ $index }">
              {{ (paginationData.currentPage - 1) * paginationData.pageSize + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="fee" label="充值金额" align="center" />
          <el-table-column prop="real" label="实际金额" align="center" />
          <el-table-column prop="superName" label="上级名称" align="center" />
          <el-table-column prop="goodsCode" label="产品编码" align="center" />
          <!-- <el-table-column prop="callSuper" label="上级名称" align="center">
                <template #default="scope">
                  <el-text class="mx-1" v-if="scope.row.callSuper == 0" type="danger">未配置</el-text>
                  <el-text class="mx-1" v-if="scope.row.callSuper == 1">博管家</el-text>
                  <el-text class="mx-1" v-if="scope.row.callSuper == 2">驰龙</el-text>
                  <el-text class="mx-1" v-if="scope.row.callSuper == 3">科飞</el-text>
                </template>
              </el-table-column> -->
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template #default="scope">
              <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button
                v-if="scope.row.state == '启用'"
                type="primary"
                text
                bg
                size="small"
                @click="handleUpdateJY(scope.row)"
                >禁用</el-button
              >
              <el-button
                v-if="scope.row.state == '禁用'"
                type="primary"
                text
                bg
                size="small"
                @click="handleUpdateQY(scope.row)"
                >启用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 修改 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle === undefined ? '新增话费配置' : '修改话费配置'"
      @close="resetForm"
      width="30%"
    >
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
        <el-form-item prop="real" label="实际金额">
          <el-input v-model="formData.real" placeholder="请输入实际金额" />
        </el-form-item>
        <el-form-item prop="callSuper" label="上级">
          <el-select v-model="formData.callSuper" clearable placeholder="请选择上级账号" style="width: 240px">
            <el-option v-for="item in tableDataA" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item prop="goodsCode" label="产品编码">
          <el-input v-model="formData.goodsCode" placeholder="请输入产品编码" />
        </el-form-item>
        <el-form-item prop="state" label="状态">
          <el-select v-model="formData.state" clearable placeholder="请选择">
            <el-option :key="1" label="禁用" value="禁用" />
            <el-option :key="2" label="启用" value="启用" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.table-wrapper {
  margin-bottom: 20px;
}
</style>
